import React,{useEffect,useState} from "react";
import {StyleSheet,View, ScrollView,Pressable,Text, Image,Alert} from 'react-native';
import Headers from '@/app/components/header/Headers';
import {size} from '@/app/utils';
import { useNavigation } from "@react-navigation/native";
import Constants from 'expo-constants';
import { useTranslation } from '@/app/utils/useTranslation';

let SettingScreen = (props:any)=>{
    let {t} = useTranslation();
    let [appVersion,setAppVersion] = useState('');
    let [appBuildNumber,setAppBuildNumber] = useState('');
    let navigation = useNavigation<any>();
    useEffect(()=>{
        const appVersion = Constants.expoConfig?.version;
        // 获取构建号（通常用于区分同一版本的不同构建）
        const buildNumber = Constants.expoConfig?.ios?.buildNumber ?? Constants.expoConfig?.android?.versionCode ?? '';
        // 获取应用版本号
        setAppVersion(appVersion || '');

        // 获取构建号
        // const buildNumber = DeviceInfo.buildNumber;
        setAppBuildNumber(String(buildNumber));
    },[])


    return(
        <View style={{ flex: 1,backgroundColor:'#fff'}}>
            <Headers
                title={t('t10')}
                border={false}
                barStyle={0}
                leftIcon={require('@/assets/images/icon/back.png')}
                rightIcon={require('@/assets/images/home/2.png')}
                backgroundColor={'#fff'}
                centerColor={'#444'}
                rightColor={'#38B781'}
                {...props}
            />
            <ScrollView style={{flex: 1,paddingLeft:size(18),paddingRight:size(18)}}> 
                <View>
                    <View style={styles.logobox}>
                        <Image
                            source={
                                require('@/assets/images/auth/logo2.png')
                            }
                            style={[styles.IconImage]}
                        />
                        <View>
                            <Text style={styles.logosubtitle}>Version {appVersion}</Text>
                        </View>
                    </View>
                    <View>
                        <Pressable onPress={()=>{
                                navigation.push('pages/UserRulesScreen/index');
                            }}  style={styles.choutilistitembox}>
                            <View>
                                <Text style={styles.choutilistitemtextbox}>{t('t15')}</Text>
                            </View>
                            <Image
                                style={styles.noticeboxrightimg}
                                source={
                                    require('@/assets/images/home/11.png')
                                }
                            />
                        </Pressable>
                        <Pressable onPress={()=>{
                            navigation.push('pages/UserYSRulesScreen/index');
                        }}  style={styles.choutilistitembox}>
                            <View>
                                <Text style={styles.choutilistitemtextbox}>{t('t16')}</Text>
                            </View>
                            <Image
                                style={styles.noticeboxrightimg}
                                source={
                                    require('@/assets/images/home/11.png')
                                }
                            />
                        </Pressable>
                    </View>
                </View>
            </ScrollView>
        </View>
    )
};

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
    },
    IconImage:{
        width: size(110),
        height: size(56),
    },
    logobox:{
        flexDirection: 'column',
        alignItems:"center",
        justifyContent:'center',
        marginTop: size(30),
        marginBottom: size(30),
    },
    choutilistitembox:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        height:size(50),
    },
    choutilistitemtextbox:{
        color:"#3D3D3D",
        fontSize:size(14),
    },
    noticeboxrightimg:{
        width:size(12),
        height:size(12)
    },
    logosubtitle:{
        color:"#3D3D3D",
        fontSize:size(14),
        marginTop:size(10),
    }
})

export default SettingScreen;

